<template>
  <div class="my" :style="{minHeight:$store.state.minHeight+'rem'}">
    <header>
      <div class="storeInfo">
        <div class="shopImg">
          <img :src="$store.state.imgurlApi+store_info.avatar" alt="">
        </div>
        <div class="shopInfo">
          <div>{{store_info.nickname}}</div>
          <div class="shopNum">商户号：{{store_info.id}}</div>
        </div>
        <div class="statue" v-if="config_info[12].value==1">营业中</div>
        <div class="statue" v-else>休息中</div>
      </div>
    </header>
    <div class="nav_list">
      <router-link to="/views/Business/order" tag="div" class="nav margin_bottom">
        <div class="name">我的订单中心</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </router-link>
      <router-link to="/views/Business/printer" tag="div" class="nav">
        <div class="name">打印机设置</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </router-link>
      <router-link to="/views/Business/tips" tag="div" class="nav margin_bottom">
        <div class="name">通知与消息音设置</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </router-link>
      <router-link to="/views/Business/setting" tag="div" class="nav margin_bottom">
        <div class="name">设置</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </router-link>
      <router-link to="/views/Business/storeInfo" tag="div" class="nav">
        <div class="name">联系客服</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </router-link>
      <router-link to="/views/Business/problem" tag="div" class="nav">
        <div class="name">帮助中心</div>
        <van-icon name="arrow" color="#999999" size="17" />
      </router-link>
    </div>
    <div class="logout" @click="signOut">退出</div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Icon } from 'vant';

  Vue.use(Icon);
    export default {
        name: "my",
      data(){
        return {
          store_id:0,
          store_info:{},
          config_info:[{
            "config_id":1,
            "value":""
          },{
            "config_id":2,
            "value":""
          },{
            "config_id":3,
            "value":""
          },{
            "config_id":4,
            "value":""
          },{
            "config_id":5,
            "value":""
          },{
            "config_id":6,
            "value":""
          },{
            "config_id":7,
            "value":""
          },{
            "config_id":8,
            "value":""
          },{
            "config_id":9,
            "value":""
          },{
            "config_id":10,
            "value":""
          },{
            "config_id":11,
            "value":""
          },{
            "config_id":12,
            "value":""
          },{
            "config_id":13,
            "value":""
          },{
            "config_id":14,
            "value":""
          }]
        }
      },
      methods:{
        signOut(){
          // 退出登录
          this.$myStorage.signOut();
          this.$store.commit('signOutLogin');
          this.$router.push({path:"/views/login/login"});
        }
      },
      mounted() {
        if(localStorage.getItem("storeInfo")){
          this.store_info = JSON.parse(localStorage.getItem("storeInfo"));
          this.config_info = JSON.parse(localStorage.getItem("configInfo"));
        }else{

        }
      }
    }
</script>

<style scoped>
  .my{
    background: #F5F5F5;
  }
  .my header{
    width: 100%;
    height: 1.15rem;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    color: #ffffff;
  }
  .my .storeInfo{
    display: flex;
    justify-content: space-between;
    padding: .3rem .21rem .16rem .18rem;
  }
  .my .shopImg{
    width: .36rem;
    height: .36rem;
    overflow: hidden;
    margin-right: .13rem;
    border-radius: .03rem;
  }
  .my .shopInfo{
    flex-grow: 1;
    font-size: .15rem;
    font-weight: bold;
  }
  .my .shopNum{
    font-size: .13rem;
    font-weight: normal;
  }
  .my .statue{
    width: .7rem;
    height: .33rem;
    border: 1px solid #ffffff;
    border-radius: .05rem;
    text-align: center;
    line-height: .33rem;
    font-size: .15rem;
  }
  .my .info>div{
    width: 33%;
    text-align: center;
    color: #333333;
    font-size: .14rem;
  }
  .my .nav_list{
    margin-bottom: .2rem;

  }
  .my .nav{
    width: calc(100% - .4rem);
    padding: 0 .2rem;
    height: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .15rem;
    background: #ffffff;
    color: #333333;
  }
  .my .nav.margin_bottom{
    margin-bottom: .12rem;
  }
  .logout{
    width: 3rem;
    height: .44rem;
    line-height: .44rem;
    background: linear-gradient(0deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    color: #ffffff;
    font-size: .14rem;
    border-radius: .22rem;
    text-align: center;
    margin: 0 auto;
  }
</style>
